<template>
  <div class="">
    <navigate>{{
      currentType == 1 ? "收取记录详情" : "投递记录详情"
      }}</navigate>
    <div class="record_details">
      <div class="wisdom_tree_box">
        <div class="item-tree">
          <img :src="info.avatar" alt="" class="head_portrait" />
          <div class="tree-info">
            <div class="nickname">{{ info.user_name }}</div>
            <div class="time">{{ convertTimestampToDateTime(info.time) }}</div>
            <div class="content">
              {{ info.content }}
            </div>
            <div class="img_box" v-if="info.fruitImg && info.fruitImg.length > 0">
              <img :src="item.img" alt="" v-for="(item, index) in info.fruitImg" :key="index" class="user_img" />
            </div>

            <div class="play_box dis_flex" v-if="info.file">
              <img src="@/assets/images/home/deliver_play_icon.png" alt="" class="play_icon" @click="playAudio"
                v-if="isPlaying" />
              <img src="@/assets/images/home/deliver_pause_icon.png" alt="" class="play_icon" @click="playAudio"
                v-else />
              <div class="line"></div>
              <div class="progress_bar">
                <div class="file_bar" :style="{ width: progress + '%' }"></div>
                <div class="sliding_block" :style="{ left: progress + '%' }"></div>
              </div>
              <div class="progress_time">{{ formatAudioTime(totalDuration) }}</div>
            </div>

            <div class="operation_box dis_flex justify_center">
              <div class="dis_flex">
                <img src="@/assets/images/home/collect.png" alt="" />
                <span>{{ info.collect_num }}人收取过</span>
              </div>
              <div class="dis_flex">
                <img src="@/assets/images/home/like.png" alt="" />
                <span>点赞{{ info.like_num }}次</span>
              </div>
              <div class="dis_flex">
                <img src="@/assets/images/home/comment.png" alt="" />
                <span>{{ info.comment_num }}条评论</span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 评论 -->
      <div class="comment_box">
        <div class="comment_num">评论（共{{ info.fruitComment && info.fruitComment.length }}条）</div>
        <div class="comment_list">
          <div v-for="(item, index) in info.fruitComment" :key="index" class="item_comment">
            <img :src="item.avatar" alt="" class="comment_img" />
            <div class="comment_info">
              <div class="comment_name">{{ item.nickname }}</div>
              <div class="comment_txt">
                {{ item.content }}
              </div>
              <div class="comment_time">{{ convertTimestampToDateTime(item.time) }}</div>
            </div>
          </div>
        </div>
      </div>
      <div class="no_data_txt">- 暂无更多评论 -</div>
    </div>
    <!-- 底部操作 -->
    <div class="footer_operate">
      <input type="text" :placeholder="inputPlaceholder" v-if="currentType == 1" @keyup.enter="handleSend"
        v-model="commentContent" />
      <div v-else class="colse_btn" @click="submitComment">{{ info.is_comment == 1 ? '关闭评论' : '开启评论' }}</div>
      <div class="num_info">
        <div class="apple apply_box" v-if="currentType == 2">
          <div class="red_dot" v-if="info.real_name_status == 1"></div>
          <img src="@/assets/images/function/apply_icon.png" alt="" />
          <div>申请</div>
        </div>
        <div class="apple" v-if="currentType == 1" @click="submitCollectLike">
          <img src="@/assets/images/function/like.png" alt="" v-if="info.is_like == 1" />
          <img src="@/assets/images/function/no_like.png" alt="" v-else />
          <div>点赞</div>
        </div>
        <div @click="toDel">
          <img src="@/assets/images/function/del_icon.png" alt="" />
          <div>删除</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getAudioDuration, formatAudioTime, setupAudioInstance } from '@/utils/wisdomTree'
import { convertTimestampToDateTime } from "@/utils/time";
import { queryDeliveryDatails, queryCollectDetails, collectComment, toCollectLike, delCollectInfo, operationComment, delDeliverInfo } from "@/api/funcation/wisdomTree";
export default {
  data() {
    return {
      isPlaying: false,
      audioInstance: null,
      inputPlaceholder: "参与回复",
      currentType: null,
      info: {},
      id: '',
      progress: 0,
      commentContent: '',
      totalDuration: '',//总时长
    };
  },
  created() {
    this.currentType = this.$route.query.type
    this.id = this.$route.query.id
    if (this.currentType == 1) {
      this.getCollectDetails()
    } else {
      this.getDeliveryDatails()
    }

  },
  methods: {
    formatAudioTime,
    convertTimestampToDateTime,
    //收取详情
    async getCollectDetails() {
      let res = await queryCollectDetails({ id: this.id })
      if (res.code == 200) {
        this.info = res.data
        this.audioInstance = new Audio(this.info.file);
        setupAudioInstance(this.audioInstance, this);
      }
    },
    //投递详情
    async getDeliveryDatails() {
      let res = await queryDeliveryDatails({ id: this.id })
      if (res.code == 200) {
        this.info = res.data
        this.audioInstance = new Audio(this.info.file);
        setupAudioInstance(this.audioInstance, this);
      }
      this.totalDuration = await getAudioDuration(this.info.file)
    },
    //点赞
    async submitCollectLike() {
      let par = {
        id: this.info.id,
        status: this.info.is_like == 1 ? 0 : 1
      }
      let res = await toCollectLike(par);
      if (res.code == 200) {
        this.getCollectDetails();
      }
    },
    //删除
    async toDel() {
      const delApi = this.currentType == 1 ? delCollectInfo : delDeliverInfo;
      this.$popup({
        visible: false,
        title: "提示",
        message: "确定要删除此信息吗？",
        confirmOperate: async () => {
          const res = await delApi({ id: this.id });
          if (res.code === 200) {
            this.$toast.success("删除成功！");
            this.$router.push('/sendReceiveRecord');
          }
        }
      });
    },
    playAudio() {
      if (this.audioInstance && this.info.file) {
        if (this.audioInstance.paused) {
          this.audioInstance.play();
          this.isPlaying = true;
        } else {
          this.audioInstance.pause();
          this.isPlaying = false;
        }
      }
    },
    //去评论
    async handleSend() {
      let par = {
        id: this.info.id,
        content: this.commentContent,
      };
      let res = await collectComment(par);
      if (res.code == 200) {
        this.getDeliveryDatails()
        this.commentContent = ''
      }
    },
    //是否开启评论
    async submitComment() {
      let par = {
        id: this.info.id,
        is_comment: this.info.is_comment == 1 ? 0 : 1
      }
      let res = await operationComment(par)
      if (res.code == 200) {
        this.$toast.success("操作成功！");
        this.getDeliveryDatails()
      }
    },
    toApply() {
      this.$router.push("/apply");
    },
  },
};
</script>

<style lang="less" scoped>
.record_details {
  padding: 10px 10px 0 10px;
  height: 100vh;
  background-color: #f4f6fa;
}

.dis_flex {
  display: flex;
  align-items: center;
}

.justify_center {
  justify-content: space-between;
}

//智慧树
.wisdom_tree_box {}

.wisdom_tree_box .item-tree {
  display: flex;
  background-color: #ffffff;
  border-radius: 5px;
  margin-bottom: 6px;
  padding: 13.33px 16.67px 17.67px 10px;
}

.wisdom_tree_box .item-tree .head_portrait {
  width: 40px;
  height: 40px;
  margin-right: 14px;
  border-radius: 50%;
}

.tree-info {
  color: #333333;
}

.tree-info .nickname {
  font-size: 15px;
}

.tree-info .time {
  font-size: 12px;
  opacity: 0.5;
  margin-top: 10px;
}

.tree-info .content {
  font-size: 13px;
  margin: 20px 0 16px;
}

.tree-info .img_box {
  width: 100%;
  height: 82px;
}

.tree-info .img_box .user_img {
  width: 82px;
  height: 82px;
  border-radius: 5px;
  margin-right: 13px;
}

.tree-info .img_box .user_img:last-child {
  margin: 0;
}

//播放
.play_box {
  width: 100%;
  height: 30px;
  background: #f4f6fa;
  border-radius: 6.67px;
  margin-top: 10px;
  padding: 0 10px;
}

.play_box .play_icon {
  width: 18px;
  height: 18px;
}

.line {
  width: 0.33px;
  height: 19px;
  opacity: 0.3;
  background: #777777;
  margin: 0 6.67px;
}

.progress_bar {
  position: relative;
  width: 150px;
  height: 6px;
  background: #c2efff;
  border-radius: 3px;
}

.file_bar {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  background: linear-gradient(90deg, #0eaeff 0%, #0eaeff 100%);
  border-radius: 3px;
  transition: width 0.1s linear;
}

.sliding_block {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 10px;
  height: 6px;
  background: linear-gradient(0deg,
      rgba(0, 0, 0, 0.3) 0%,
      rgba(0, 0, 0, 0) 100%),
    #0eaeff;
  border-radius: 4px;
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0) inset;
  transition: left 0.1s linear;
}

.progress_time {
  opacity: 0.7;
  font-size: 11.33px;
  color: #333333;
  margin-left: 8px;
}

.operation_box {
  margin-top: 20px;
}

.tree-info .operation_box span {
  color: #333333;
  font-size: 12px;
  opacity: 0.5;
}

.tree-info .operation_box img {
  width: 13px;
  height: 13px;
  margin-right: 8px;
}

.footer-tips {
  color: #333333;
  font-size: 12px;
  opacity: 0.5;
  margin: 30px 0 50px;
  text-align: center;
}

//评论
.comment_box {
  background: #ffffff;
  border-radius: 3.33px;
  padding: 17.67px 20px 13px 10px;
}

.comment_num {
  opacity: 0.5;
  font-size: 12px;
  margin-bottom: 16.67px;
  padding-left: 3px;
}

.comment_list {}

.item_comment {
  display: flex;
  margin-bottom: 13px;
}

.item_comment:last-child {
  margin: 0;
}

.comment_img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin-right: 13.33px;
}

.comment_info {
  flex: 1;
}

.comment_name {
  color: #00aeff;
  font-size: 10.67px;
  line-height: 10.67px;
}

.comment_txt {
  margin: 12.33px 0 9.33px;
  font-size: 13.33px;
  color: #555555;
}

.comment_time {
  font-size: 10.67px;
  line-height: 10.67px;
  color: #999999;
}

.no_data_txt {
  color: #555555;
  line-height: 10.67px;
  font-size: 10.67px;
  text-align: center;
  margin: 28px 0;
}

//底部操作
.footer_operate {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 100vw;
  display: flex;
  align-items: center;
  height: 60px;
  background: #ffffff;
  color: #333333;
  padding: 0 17px;
}

.footer_operate input {
  width: 236.67px;
  height: 36.67px;
  border-radius: 6.67px;
  border: none;
  font-size: 14px;
  background: rgba(247, 247, 247, 0.97);
  padding: 0 10px;
  box-sizing: border-box;
}

.colse_btn {
  width: 236.67px;
  height: 36.67px;
  line-height: 36.67px;
  text-align: center;
  background: linear-gradient(0deg, #ffffff 0%, rgba(255, 255, 255, 0) 100%),
    rgba(0, 0, 0, 0);
  border: 0.33px solid #aaa;
  border-radius: 6.67px;
  font-size: 14px;
}

.num_info {
  display: flex;
  align-items: center;
  text-align: center;
  margin-left: 23.33px;
}

.apply_box {
  position: relative;
}

.red_dot {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  right: -3px;
  top: -5px;
  background: #ff6161;
}

.num_info img {
  width: 18px;
  height: 18px;
}

.num_info div {
  margin-top: 4px;
  font-size: 10.67px;
  line-height: 10px;
  color: #333333;
}

.num_info .apple {
  margin-right: 30px;
}
</style>